import dynamic from 'next/dynamic'
import { Suspense } from 'react'
import { Card, Row, Col, Statistic } from 'antd'
import { 
  BuildOutlined, 
  ApiOutlined,
  CheckCircleOutlined,
  CloseCircleOutlined,
  ToolOutlined
} from '@ant-design/icons'
import LoadingSpinner from '../components/common/LoadingSpinner'

// 动态导入3D组件
const Scene3D = dynamic(() => import('../components/3D/Scene3D'), {
  ssr: false,
  loading: () => <LoadingSpinner />
})

const ParkScene = dynamic(() => import('../components/3D/ParkScene'), {
  ssr: false
})

const PerformanceMonitor = dynamic(() => import('../components/Performance/PerformanceMonitor'), {
  ssr: false
})

const ThreeDDemo = () => {
  return (
    <div style={{ 
      height: '100vh',
      display: 'flex',
      flexDirection: 'row',
      padding: '16px',
      gap: '16px',
      backgroundColor: '#000'
    }}>
      <div style={{ flex: 1, position: 'relative' }}>
        <Scene3D>
          <Suspense fallback={<LoadingSpinner is3D />}>
            <ParkScene />
          </Suspense>
        </Scene3D>
      </div>
      <div style={{ width: '300px' }}>
        <Row gutter={[0, 16]}>
          <Col span={24}>
            <Card>
              <Statistic
                title="设备总数"
                value={156}
                prefix={<BuildOutlined />}
                valueStyle={{ color: '#1890ff' }}
              />
            </Card>
          </Col>
          <Col span={24}>
            <Card>
              <Statistic
                title="在线设备"
                value={142}
                prefix={<CheckCircleOutlined />}
                valueStyle={{ color: '#52c41a' }}
              />
            </Card>
          </Col>
          <Col span={24}>
            <Card>
              <Statistic
                title="离线设备"
                value={14}
                prefix={<CloseCircleOutlined />}
                valueStyle={{ color: '#ff4d4f' }}
              />
            </Card>
          </Col>
          <Col span={24}>
            <Card>
              <Statistic
                title="维护中"
                value={2}
                prefix={<ToolOutlined />}
                valueStyle={{ color: '#faad14' }}
              />
            </Card>
          </Col>
          <Col span={24}>
            <Card>
              <Statistic
                title="设备类型"
                value={5}
                prefix={<ApiOutlined />}
                valueStyle={{ color: '#722ed1' }}
              />
            </Card>
          </Col>
        </Row>
      </div>
    </div>
  )
}

export default ThreeDDemo 